<template>
    <div>
      <!--租户管理面包屑-->
      <el-breadcrumb separator="/" style="padding-left: 10px;padding-bottom: 10px;font-size: 12px;">
        <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item>租户管理</el-breadcrumb-item>
      </el-breadcrumb>
      <!--用户列表卡片-->
      <el-card class="box-card card" id="card">
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
          <el-form-item size="mini" label="用户名" label-width="70px" style="font-weight: bold">
            <el-input clearable v-model="searchForm.username" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item size="mini" label="用户状态" label-width="70px" style="font-weight: bold">
            <el-radio v-model="searchForm.forbidden" label="0">禁用</el-radio>
            <el-radio v-model="searchForm.forbidden" label="1">启用</el-radio>
            <el-radio v-model="searchForm.forbidden" label="">不限</el-radio>
          </el-form-item>
          <el-form-item size="mini" style="margin-left: 10px;">
            <el-button icon="el-icon-refresh" @click="resetForm">重置</el-button>
            <el-button icon="el-icon-search" @click="onSubmit(1)" type="primary">查询</el-button>
            <el-button icon="el-icon-download" type="warning" @click="exportTouristList">导出</el-button>
          </el-form-item>
        </el-form>
        <!--表格内容显示区域-->
        <el-table
          :max-height="this.getTableMaxHeight()"
          v-loading="loading" element-loading-text="数据加载中..."
          :data="page.records"
          border
          size="mini"
          style="width: 100%;">
          <el-table-column
            width="60px"
            align="center"
            type="index"
            label="序号">
          </el-table-column>
          <el-table-column
            width="80px"
            align="center"
            prop="username"
            label="用户名">
          </el-table-column>
          <el-table-column
            width="400px"
            align="center"
            prop="password"
            label="密码">
          </el-table-column>
          <el-table-column
            align="center"
            prop="phone"
            label="手机号">
          </el-table-column>
          <el-table-column
            width="110px"
            align="center"
            sortable
            prop="address"
            label="地址">
          </el-table-column>
          <el-table-column
            width="110px"
            align="center"
            prop="createTime"
            label="电话号码">
          </el-table-column>
          <el-table-column
            width="70px"
            align="center"
            prop="forbidden"
            label="是否正常使用">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.forbidden"
                active-color="#ff4949"
                inactive-color="#13ce66"
                @change="updateTouristStatusClick(scope.row, scope.row.forbidden)">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="操作">
<!--            <template slot-scope="scope">-->
<!--              <el-tooltip effect="dark" content="编辑用户" placement="top" :enterable="false">-->
<!--                <el-button @click="show(scope.row.id, true)" size="mini" type="primary" icon="el-icon-edit"-->
<!--                           circle></el-button>-->
<!--              </el-tooltip>-->
<!--              <el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">-->
<!--                <el-button @click="assignRole(scope.row.id, scope.row.nickname)" size="mini" type="info" icon="el-icon-s-custom" circle></el-button>-->
<!--              </el-tooltip>-->
<!--              <el-tooltip effect="dark" content="重置密码" placement="top" :enterable="false">-->
<!--                <el-button @click="resetPassword(scope.row.id)" size="mini" type="warning" icon="el-icon-lock"-->
<!--                           circle></el-button>-->
<!--              </el-tooltip>-->
<!--              <el-tooltip effect="dark" content="删除用户" placement="top" :enterable="false">-->
<!--                <el-button @click="deleteAccount(scope.row.id)" size="mini" type="danger" icon="el-icon-delete"-->
<!--                           circle></el-button>-->
<!--              </el-tooltip>-->
<!--            </template>-->
          </el-table-column>
        </el-table>
        <!--分页-->
        <el-pagination
          v-if="page.total > 0"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.current"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total">
        </el-pagination>
      </el-card>
    </div>
</template>

<script>
  import { getTouristPage, searchTouristListPage, updateTouristStatus, exportList } from '@/api/tourist'
    export default {
        name: "Tourist",
      data(){
          return{
            searchForm: {
              username: '',
              forbidden: ''
            },
            page: {
              records: [],
              total: 0,
              size: 0,
              current: 0,
              orders: []
            },
            pageNum: 1,
            pageSize: this.getPageSize(),
            loading: false,

          }
      },
      created () {
        this.init()
      },
      methods:{
        init () {
          const _this = this
          // _this.loading = true
            /* 创建组件的时候加载页面信息 */
            getTouristPage(_this.pageNum, _this.pageSize).then(response => {
              _this.page = response.data
              console.log(_this.page)
            }).finally(() => {
            _this.loading = false
          })
        },
        handleSizeChange (val) {
          /* 将value赋值给size, 重新查询数据 */
          this.pageSize = val
          this.onSubmit()
        },
        handleCurrentChange (val) {
          this.pageNum = val
          this.onSubmit()
        },
        updateTouristStatusClick (row, status) {
          const _this = this
          updateTouristStatus(row.id, status).then(response => {
            _this.NormalMsg(_this, response.message, !status ? 'success' : 'warning')
          }).catch(() => {
            row.forbidden = !status
          })
        },
        onSubmit (page = this.pageNum) {
          const _this = this
          searchTouristListPage(this.searchForm, page, this.pageSize).then(response => {
            _this.page = response.data
          })
        },
        resetForm () {
          this.searchForm.username = ''
          this.searchForm.forbidden = ''
          this.pageNum = 1
          this.pageSize = this.getPageSize()
          const _this = this
          getTouristPage(this.pageNum, this.pageSize).then(response => {
            _this.page = response.data
          })
        },
        exportTouristList () {
          // 导出数据
          this.$confirm('确定导出用户列表吗?', '温馨提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            exportList(this.searchForm).then(res => {
              this.downloadFile(res, '用户信息', 'xls')
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消导出'
            })
          })
        },
      }
    }
</script>

<style scoped>

</style>
